<!DOCTYPE HTML >
<html>
    <head>
        <title>css盒子模型</title>
        <meta charset='utf-8'>
        <link rel='stylesheet' type='text/css' href='../css/c1.css'>
        <style type='text/css'>
            #h{
                margin: 20px 10px;
                border: 5px solid #bf314a;
                padding: 20px;
            }
        </style>
    </head>
    <body>
    <div class='title'>css盒子模型</div>
    <div style = 'text-indent: 20px'>内容(content)、内边距(padding)、边框(border)、外边距(margin)，
        CSS盒子模式都具备这些属性。<br/>
        内边距可以理解为盒子里装的东西和边框的距离，<br/>
        而边框有厚薄和颜色之分，<br/>
        内容就是盒子中间装的东西，<br/>
        外边距就是边框外面自动留出的一段空白。</div>
    <div class='title'>代码示例</div>
    <div class='code'>
        <pre>
            &lt;style type='text/css'&gt;
                #h{
                    margin: 20px 10px;
                    border: 5px solid #bf314a;
                    padding: 20px;
                }
             &lt;/style&gt;
             &lt;div id='h'&gt;
                内容
            &lt;/div&gt;
        </pre>
    </div>
    <div class='title'>效果</div>
    <div id='h'>
        内容
    </div>
    <hr/>
    <div class='title'>盒子模型图</div>
    <div style='background-image: url("../img/pad.jpg") ;width: 434px;height: 322px; '></div>
    </body>
</html>